<template>
  <div class="map">
    <div class="canvas" ref="chartsDOM"></div>
<!--    <div class="button" @click="backToCity" v-if="level">返回</div>-->


  </div>


</template>

<script >
import * as echarts from 'echarts';
// import GetqujingMap from '@/api/MapApi/GetqujingMap'   //获取远程地图数据 需联网
import axios from 'axios'


  export default {
    name:'TrainMap',
    data(){
      return{
        MapChart:null,  //地图对象
        //存储县区数据
        // county_data: {},
        //地图级别
        level:0,    //0表示市级，1表示县级

        //地图文件
        mapfile:['曲靖','会泽','宣威','沾益','马龙','麒麟','富源','陆良','罗平','师宗'],

        //每个地图板块颜色
        townColor:{},

        //作答弹窗状态
        answer_pop: false,
        //单击区域的地点名称
        mapname:null,
        //输入文本
        input_text:null,
        input_color:'',

        //成绩
        grade:0,
        //区段分数
        fraction:10
      }
    },
    components: {},
    mounted() {
      this.initChart();  //绘制地图图表
      //加载
      this.drawCityMap();  //绘制曲靖地图
    },
    computed:{
      examine_status(){
        return this.$store.state.examine_status
      }
    },
    methods:{

      //检测窗口变化 重绘制图表
      handleResize(){
        if (this.MapChart) {
          this.MapChart.resize();
        }
      },
      //初始化加载地图
      initChart(){
        //初始化地图对象
        this.MapChart = echarts.init(this.$refs['chartsDOM']);
        //窗口大小改变时重绘图表
        // window.addEventListener('resize',()=>{
        //   this.chart.resize()
        // })
        // this.handleResize = debounce(() => {})

      },

      //初始化绘制曲靖市地图
      drawCityMap(){
        //获取本地的地图json数据
        const qujingMap = axios.get('/map_json/曲靖市.json');
        // console.log('曲靖地图对象：',qujingMap)

        //显示loading动画
        // this.MapChart.showLoading()
        // console.log('qujingmap:',qujingMap)
        //根据获取的地图数据绘制地图
        qujingMap.then(res => {
          //为地图添加随机颜色
          // let dataArray=[]   //地图板块数据
          // for(let i=0;i<res.data.features.length;i++){
          //  let itemData =res.data.features[i];  //遍历板块数据
          //   //重构数据格式，添加随机颜色
          //  dataArray.push({name:itemData.properties.name,value: itemData.properties.adcode,itemStyle:{areaColor:this.getRandomColor()}})
          // }
          //重构不同颜色
          let dataArray = this.assignColors(res)
          //县区数据存储
          // this.county_data = this.get_county_data(res)
          //获取数据后关闭loading动画
          // this.MapChart.hideLoading();
          //注册地图
          echarts.registerMap('qj',res.data);
          //设置地图层级为0代表市级
          this.level = 0;
          const option = {
            title:{
              text:'曲靖市地图—县区',
              left: '10vw', // 确保标题可见
              top:'10vh',
              textStyle: {
                color: '#696969', // 修改为你想要的颜色（如 '#ff0000' 表示红色）
                // fontSize: 16,  // 可选：调整字体大小
                // fontWeight: 'bold' // 可选：调整字体粗细
              }
            },
            tooltip:{
              show:true    //不显示提示信息
            },   //配置提示框
            series: [
              {
                name: '曲靖地图',
                type:'map',
                map:'qj',
                roam:false,  //允许缩放平移
                label:{
                  color:'#FFFFFF',
                  show:true
                },
                itemStyle:{
                  borderColor:'rgb(0,0,0)',
                  shadowColor:'#09ec14',
                  // shadowColor:'rgb(0,0,0)',
                  shadowBlur: 5,
                },
                data:dataArray,

                //鼠标悬停配置
                emphasis:{
                  label:{
                    show:true
                  },
                  itemStyle:{
                    areaColor: '#FF0000', //悬停颜色
                    shadowColor:'#000000',
                    shadowBlur:30,
                  }
                },
                selectedMode:true
              }
            ],
          };
          this.MapChart.setOption(option);
          // window.addEventListener('resize',()=>  this.MapChart.resize())
          //为地图县区板块绑定鼠标滑动事件
          // this.MapChart.on('mouseover', this.handleMapHove);
          //阻止浏览器默认右键事件
          document.oncontextmenu = function (){
            return false
          }
          //监听鼠标左键事件
          this.MapChart.on('click',this.ToCountyMapClick)
          //监听鼠标右键事件
          // this.MapChart.on('contextmenu',this.ShowPopClick)
          //鼠标双击
          // this.MapChart.on('dblclick',this.backToCity)
          }).catch(error => {
            console.error('地图数据加载错误:', error);
            this.MapChart.hideLoading();
          });
      },

      //绘制乡镇街道地图地图
      drawCountyMap(map_name){
        // this.MapChart.showLoading()  //展示加载状态
        //获取本地的地图json数据
        const CountyMap = axios.get('/map_json/'+map_name+'.json');
        //显示loading动画
        // this.MapChart.showLoading()
        //根据获取的地图数据绘制地图
        CountyMap.then(res => {

        //重构乡镇数据并随机颜色
        let dataArray = this.assignColors(res)
        // this.county_data = this.get_county_data(res)
        //获取数据后关闭loading动画
        // this.MapChart.hideLoading();
        //注册地图
        echarts.registerMap('county',res.data);
        //设置地图层级为1代表县区级
        this.level = 1;
        const option = {
            title:{
              text:'曲靖市地图—乡镇',
            },
            tooltip:{},   //配置提示框
            series: [
              {
                name: '乡镇地图',
                type:'map',
                map:'county',
                label:{
                  color:'#FFFFFF',
                  show:true
                },
                data:dataArray,
                emphasis:{
                  itemStyle:{
                    areaColor: '#FF0000',
                  }
                }
              }
            ],
          };
          this.MapChart.setOption(option);
          //点击空白区域返回上级行政区实现
          // this.chart.off('click');  //移除先前点击事件
          // this.chart.off('mouseover');  //移除先前滑动事件
          // this.MapChart.on('click',this.handleCountyMapClick);
          //绑定鼠标点击事件
          // this.MapChart.on('click',this.handleCountyMapClick)
          // }).catch(error => {
          //   console.error('地图数据加载错误:', error);
          //   this.MapChart.hideLoading();
          //
        })

      },


      //  生成随机颜色
      getRandomColor(){
        return `#${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6,'0')}`;
      },
      //重构乡镇数据并分配颜色
      assignColors(res){
        //为地图添加随机颜色
          let dataArray=[]   //地图板块数据
          for(let i=0;i<res.data.features.length;i++){
           let itemData =res.data.features[i];  //遍历板块数据
            //重构数据格式，添加随机颜色
           dataArray.push({name:itemData.properties.name,value: itemData.properties.adcode,itemStyle:{areaColor:this.getRandomColor()}})
          }
          return dataArray
      },

      //获取曲靖市各县区数据
      get_county_data(res){
        // console.log('res:',res)
        let county_data= []    //地图板块数据
          for(let i=0;i<res.data.features.length;i++){
           let county_name =res.data.features[i].properties.name;  //遍历板块数据
            //重构数据格式，添加随机颜色
           county_data.push(county_name)
          }
          // console.log('county_data:',county_data)
          return county_data
      },


      

      //鼠标左键-进入乡镇级地图
      ToCountyMapClick(params){
        // console.log('点击了地图：',params.name)
        // console.log('地图对象：',params)
        //判断地图层级
        if( this.level === 0){
          //当前处于市级地图，点击下钻
          //判断是否点击到地图元素
          if(params.name){
            // console.log('当前处于市级地图：',params.name)
            //回收县区级地图
            // this.MapChart.dispos()
            //绘制所点击的地图
            this.drawCountyMap(params.name);
          }
        //判断是否处于县区级地图
        }else if( this.level === 1){
          this.backToCity()
        }
      },


      backToCity(){
        // console.log('点击了返回')
        this.drawCityMap()
      },





    }
}
</script>

<!--<style scoped>-->
<!--  @import url('@/assets/ecss/ExamineMapCSS.ecss');-->
<!--</style>-->
<style scoped>
  .map{
    width: 30vw;
    height: 85vh;
    /*background-color: red;*/
    box-sizing: border-box;
  }
  .canvas{
    width: 30vw;
    height: 85vh;
    /*background-color: greenyellow;*/
    position: absolute;
    /*left: calc(50% - 25vw);*/
    overflow: hidden;
    box-sizing: border-box;
    /*border: 1px black dashed;*/
    /*border-radius: 10px;*/
}

</style>

